<template>
  <div class="cmt-container">
    <h3>发表评论</h3>
    <hr />
    <textarea maxlenght="120" placeholder="请输入评论的内容（最多吐槽120字）"></textarea>
    <mt-button type="primary" size="large">发表评论</mt-button>
    <div class="cmt-list">
      <div class="cmt-item">
        <div class="cmt-title">
          第1楼 &nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2020 20:12&nbsp;&nbsp;
          <div class="cmt-body">锄禾日当午，旱地哈夏天</div>
        </div>
      </div>
      <div class="cmt-item">
        <div class="cmt-title">
          第2楼 &nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2020 12-12 20:12&nbsp;&nbsp;
          <div class="cmt-body">行路难，多歧路，今安在</div>
        </div>
      </div>
      <div class="cmt-item">
        <div class="cmt-title">
          第3楼 &nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2020 12-12 21:12&nbsp;&nbsp;
          <div class="cmt-body">乘风破浪会有时</div>
        </div>
      </div>
      <div class="cmt-item">
        <div class="cmt-title">
          第4楼 &nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2020 12-12 22:12&nbsp;&nbsp;
          <div class="cmt-body">窗前明月光</div>
        </div>
      </div>
      <div class="cmt-item">
        <div class="cmt-title">
          第5楼 &nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2020 12-12 23:12&nbsp;&nbsp;
          <div class="cmt-body">鹅鹅鹅，曲项向天歌</div>
        </div>
      </div>
    </div>

    <mt-button type="danger" size="large" plain>加载更多</mt-button>
  </div>
</template>

<script>
export default {
    data(){
        return {}
    },
    methods:{
        
    }
};
</script>

<style lang='scss' scoped>
.cmt-container {
  h3 {
    font-size: 18px;
  }
  textarea {
    font-size: 14px;
    height: 95px;
    margin: 0;
  }

  .cmt-list {
    margin: 10px 0;
    .cmt-item {
      font-size: 13px;
      .cmt-title {
        line-height: 35px;
        background-color: #ccc;

        .cmt-body {
          background-color: white;
          text-indent: 25px;
        }
      }
    }
  }
}
</style>